<template>
	<view class="fl-s-c">
		<image class="w-1" style="height: 574rpx;" :src="$path + '/tab4/settlein.png'" mode=""></image>
		<view class="relative fl-s-s bg-ff p-35 fl-s-s br-20 bg-ff" style="margin-top: -66rpx; width: 690rpx;">
			<view class="fl-s-s w-1">
				<text class="c-00 fs-32 bold">姓名</text>
				<input type="text" v-model="form.name" class="m-t-15 fs-28 w-1" style="padding: 0 25rpx;"
					placeholder="请填写您的姓名" />
				<view class="w-1 bb-solid m-t-20"></view>
			</view>

			<view class="fl-s-s w-1 m-t-40">
				<text class="c-00 fs-32 bold">年龄</text>
				<input type="number" v-model="form.age" class="m-t-15 fs-28 w-1" style="padding: 0 25rpx;"
					placeholder="请填写您的年龄" />
				<view class="w-1 bb-solid m-t-20"></view>
			</view>

			<view class="fl-s-s w-1 m-t-40">
				<text class="c-00 fs-32 bold">手机号码</text>
				<input type="number" v-model="form.tel" class="m-t-15 fs-28 w-1" style="padding: 0 25rpx;"
					placeholder="请填写您的手机号码" />
				<view class="w-1 bb-solid m-t-20"></view>
			</view>

			<view class="fl-s-s w-1 m-t-40">
				<text class="c-00 fs-32 bold">验证码</text>
				<view class="w-1 fr-b-c">
					<input type="number" v-model="form.code" class="m-t-15 fs-28 flex-1" style="padding: 0 25rpx;"
						placeholder="请填写验证码" />
					<text class="codebtn fr-c fs-28" style="color: #3B8AFF;" @click="getCode">{{tips}}</text>
				</view>
				<view class="w-1 bb-solid m-t-20"></view>
			</view>

			<picker @change="e=>(cur1=e.detail.value,form.jingyan=arr1[cur1])" class="w-1" :range="arr1" :value="cur1">
				<view class="fl-s-s w-1 relative m-t-40">
					<text class="c-00 fs-32 bold">电工经验</text>
					<view class="w-1 fr-b-c">
						<input type="text" :value="arr1[cur1]" class="m-t-15 fs-28 flex-1" style="padding: 0 25rpx;"
							placeholder="请选择" />
						<up-icon name="arrow-right"></up-icon>
					</view>
					<view class="w-1 bb-solid m-t-20"></view>
					<view class="w-1 h-1 absolute-0"></view>
				</view>
			</picker>

			<picker class="w-1" @change="e=>(cur2=e.detail.value,form.type = arr2[cur2])" :range="arr2" :value="cur2">
				<view class="fl-s-s w-1 relative m-t-40">
					<text class="c-00 fs-32 bold">电工类型</text>
					<view class="w-1 fr-b-c">
						<input type="text" :value="arr2[cur2]" class="m-t-15 fs-28 flex-1" style="padding: 0 25rpx;"
							placeholder="请选择" />
						<up-icon name="arrow-right"></up-icon>
					</view>
					<view class="w-1 bb-solid m-t-20"></view>
					<view class="w-1 h-1 absolute-0"></view>
				</view>
			</picker>

			<!-- 			<view class="w-1  m-t-20">
				<view class="fl-s-c">
					<up-upload :sizeType="['compressed']" :fileList="fileList2" @afterRead="afterRead"
						@delete="deletePic" name="2" :multiple="false" width="330rpx" height="196rpx" :maxCount="1">
						<image style="width: 330rpx; height: 196rpx;" :src="$path + '/login/z2.png'" mode="aspectFill">
						</image>
					</up-upload>
					<text class="c-33 fs-28 m-t-10">上传电工证（正面）</text>
				</view>
				<view class="fl-s-c" style="margin-top: 20rpx;">
					<up-upload :sizeType="['compressed']" :fileList="fileList3" @afterRead="afterRead"
						@delete="deletePic" name="3" :multiple="false" width="330rpx" height="196rpx" :maxCount="1">
						<image style="width: 330rpx; height: 196rpx;" :src="$path + '/login/z3.png'" mode="aspectFill">
						</image>
					</up-upload>
					<text class="c-33 fs-28 m-t-10">上传电工证（背面）</text>
				</view>
			</view> -->

		</view>
		<view class="w-1" style="height: 350rpx;"></view>

		<view class="iphonex w-1 bg-ff">
			<view class="bb-solid fl-s-s w-1" style="padding: 20rpx 30rpx;">
				<view class="c-99 fr-s-c fs-24 w-1">
					<view class="fr-s-c" @click="agree=!agree">
						<image v-if="agree" style="width: 32rpx; height: 32rpx;" :src="$path + '/login/y.png'"></image>
						<image v-if="!agree" style="width: 32rpx; height: 32rpx;" :src="$path + '/login/n.png'"></image>
						<text class="m-l-10">同意</text>
					</view>
					<navigator class="c-main" url="/pages/RichText/RichText?type=3" hover-class="none">《个人信息授权协议》
					</navigator>
				</view>
				<text class="c-a8 fs-24 m-t-10">以上收集的个人信息将用于师傅入驻使用</text>
			</view>
			<view class="w-1 p-30">
				<view class="big-btn" @click="sub">报名加入</view>
			</view>
		</view>


		<up-code :seconds="seconds" ref="uCodeRef" @change="codeChange"></up-code>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue'

	import {
		baseUrl
	} from '@/utils/base.js'


	const form = reactive({
		name: '',
		age: '',
		tel: '',
		jingyan: '',
		type: '',
		code: '',
		// dgfrontimg: '',
		// dgbackimg: ''
	})
	const fileList2 = ref([]);
	watch(fileList2, val => {
		console.log('图片val', val)
		let arr = []
		val.map(item => {
			if (item.status == 'success') {
				arr.push('/uploads/' + item.url.split('/uploads/')[1])
			}
		})
		form.dgfrontimg = arr.join(',')
	}, {
		deep: true
	})
	const fileList3 = ref([]);
	watch(fileList3, val => {
		console.log('图片val', val)
		let arr = []
		val.map(item => {
			if (item.status == 'success') {
				arr.push('/uploads/' + item.url.split('/uploads/')[1])
			}
		})
		form.dgbackimg = arr.join(',')
	}, {
		deep: true
	})
	const arr1 = reactive(['无', '1-2年', '2-3年', '3-5年', '5年以上'])
	const cur1 = ref(-1)

	const arr2 = reactive(['高压', '低压'])
	const cur2 = ref(-1)

	const agree = ref(false)

	const tips = ref('');
	const seconds = ref(120);
	const uCodeRef = ref(null);
	const codeChange = (text) => {
		// console.log(text)
		tips.value = text;
	};
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: baseUrl + '/api/Common/upload', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				header: {
					token: uni.getStorageSync('user').token
				},
				success: (res) => {
					setTimeout(() => {
						resolve(JSON.parse(res.data).data.fullurl)
					}, 1000);
				},
			});
		});
	};
	const afterRead = async (event) => {
		const arr = ref([]);
		switch (event.name * 1) {
			case 1:
				arr.value = fileList1.value;
				break;
			case 2:
				arr.value = fileList2.value;
				break;
			case 3:
				arr.value = fileList3.value;
				break;
		}
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = arr.value.length;
		lists.map((item) => {
			arr.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = arr.value[fileListLen];
			arr.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};
	const deletePic = (event) => {
		const arr = ref([]);
		switch (event.name * 1) {
			case 1:
				arr.value = fileList1.value;
				break;
			case 2:
				arr.value = fileList2.value;
				break;
			case 3:
				arr.value = fileList3.value;
				break;
		}
		arr.value.splice(event.index, 1);
	};
	const getCode = () => {
		if (!form.tel) return uni.$u.toast('请输入手机号');
		if (uCodeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码',
			});
			uni.$post({
				url: "/api/Sms/send",
				data: {
					mobile: form.tel,
					event: 'settled', // 注册传register 登录传login 忘记密码传pass 修改密码传 resetpwd 更换手机号传changemobile 微信登录绑定手机号传webind 验证是否是本机main 商家入驻 dplot 绑定银行卡 addpay
				}
			}).then(res => {
				uni.hideLoading();
				// 这里此提示会被start()方法中的提示覆盖
				uni.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				uCodeRef.value.start();
			})
		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	}


	function sub() {
		if (!agree.value) return uni.$u.toast('请阅读并同意《个人信息授权协议》')
		let flag = Object.values(form);
		if (flag.includes('')) return uni.$u.toast('请完善入驻信息');
		uni.$post({
			url: '/api/Center/Mastersettled',
			data: form
		}).then(res => {
			getApp().tt(res.msg, 'success');
			uni.$delayBack()
		})
	}
</script>

<style>
	page {
		background: #e4eafb;
	}
</style>